<template>
  <div class="notice-container">
    <van-nav-bar
      class="app-nav-bar"
      title="消息通知"
      @click-left="$router.back()"
    >
      <div slot="left">
        <van-icon color="#fff" size="25" name="arrow-left" />
      </div>
    </van-nav-bar>
    <div class="notice-content">
      <van-tabs @change="changeTabs" v-model="active">
        <van-tab v-for="(title, index) in titles" :key="index" :title="title">
         <div class="notice-wrap">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text=""
            @load="onLoad"
          >
          <div v-for="(notice,index) in noticeList" :key="index"> 
          <van-cell border v-if="!notice.comment_target">
            <div slot="title">
              <span>{{ notice.title  }}</span>
              <span class="notice-info">{{ notice.content }}</span>
            </div>
            <div>
              <span>{{ notice.create_time }}</span>
            </div>
          </van-cell>

          <van-cell v-else border>
            <div>
              <div class="follwer-info">
                <span class="user-name">{{ notice.title }}</span>
                <span class="action">{{ notice.content }}</span>
                <span class="notice-date">{{ notice.create_time }}</span>
              </div>
              <div class="comment-target">{{ notice.comment_target }}</div>
              <p class="comment-content">
                {{ notice.comment_content }}
              </p>
            </div>
          </van-cell>
          </div>
          </van-list>
           <van-empty v-if="noticeList.length === 0" description="暂无内容" />
         </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { getUserNotice } from '@/api/user'
export default {
  name: "Notice",
  data() {
    return {
      active: 0,
      titles: ["全部", "系统通知", "评论", "粉丝", "点赞"],
      page: 1,
      per_page: 10,
      type: '',
      loading: false,
      finished: false,
      noticeList:[]
    };
  },

  created() {
      
  },

  methods: {
      async onLoad() {
      // 异步更新数据
      const { data:{data} }  = await getUserNotice({
          type: this.type,
          page: this.page,
          per_page: this.per_page
      })
        this.noticeList.push(...data.results)

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (data.results.length === 0) {
          this.finished = true;
          return 
        }
        this.page++
    },
      changeTabs (name,title) {
        this.noticeList = []
        this.page = []
          switch (name) {
              case 0:
                  this.type = ''
                  this.onLoad()
                  break;
              case 1:
                  this.type = 1
                  this.onLoad()
                  break;
              case 2:
                  this.type = 2
                  this.onLoad()
                  break;
              case 3:
                  this.type = 3
                  this.onLoad()
                  break;
              default:
                  this.type = 4
                  this.onLoad()        
          }
      }
  },
};
</script>

<style lang="less" scoped>
.notice-container {
  .notice-wrap{
      position: fixed;
      left: 0;
      bottom: 0;
      right: 0;
      top: 90px;
      overflow: auto;
      /deep/.van-tabs__line{
          background-color: #3296fa;
      }
  }  
  .notice-info {
    color: #969799;
    margin-left: 10px;
  }
  .follwer-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    span:nth-child(n + 2) {
      color: #969799;
    }
  }
  .comment-target {
    background: #f7f8fa;
    border-radius: 0.10667rem;
    padding: 7px;
    margin: 0.13333rem 0;
    color: #868a97;
  }
  .comment-content {
    margin: 7px;
  }
}
</style>